<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物页面</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="store">
        <div class="store__nav">
            <div class="store__nav__logo">
                <img src="logo.png" alt="">
            </div>
            <ul class="store__nav__list">
                <li class="list__item">首页</li>
                <li class="list__item">商品分类</li>
                <li class="list__item">订单中心</li>
                <li class="list__item">购物车</li>
                <li class="list__item">个人中心</li>
            </ul>
            <div class="store__nav__login">
                <button class="login button--primary">登录</button>
                <button class="register button--primary">注册</button>
            </div>
        </div>
        <div class="store__search">
            <div class="search-box">
                <img src="search.png" alt="">
                <input type="text" class="serarch-input" placeholder="搜索商品">
                <button class="search-button">搜索</button>
            </div>
            <div class="search-box-hotSearch">
                <span>热门搜索:</span>
                <span>智能手机</span>
                <span>笔记本电脑</span>
                <span>运动鞋</span>
                <span>护肤套装</span>
            </div>
        </div>
        <div class="store-category">
            <div class="category-title">
                <span>全部分类</span>
                <span>服装</span>
                <span>数码</span>
                <span>家居</span>
                <span>美妆</span>
                <span>食品</span>
                <span>母婴</span>
                <span>运动</span>
            </div>
            <div class="category-content">
                <div class="content-banner">
                    <img src="bananaer.png" alt="">
                </div>
                <div class="special_suggest">
                    <h2>特色商品推荐</h2>
                    <div class="special_suggest_shop">
                        <div class="shop">
                            <img src="shop1.png" alt="">
                            <div class="name">高端无线耳机</div>
                            <div class="price">$1299</div>
                        </div>
                        <div class="shop1">
                            <img src="shop2.png" alt="">
                            <div class="name">智能手表</div>
                            <div class="price">$899</div>
                        </div>
                        <div class="shop1">
                            <img src="shop3.png" alt="">
                            <div class="name">真皮钱包</div>
                            <div class="price">$399</div>
                        </div>
                        <div class="shop1">
                            <img src="shop4.png" alt="">
                            <div class="name">时尚双肩包</div>
                            <div class="price">$599</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="store-foot"></div>
    </div>
</body>

</html>